<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.global.js"></script>
</head>
<body>  
    <!-- 不加冒号传字符串 -->
      <!-- <div id="app">
        <my-first-compoent title="第一次传值"></my-first-compoent>
      </div> -->
      <!-- <div id="app">
        <my-first-compoent :title="msg"></my-first-compoent>
      </div> -->

      <!-- <div id="app">
        <my-first-compoent @change-child-value="handlerChangeChildvalue" :title="msg"></my-first-compoent>
      </div> -->

      <div id="app">
          <span @click="changeC">让子组件变化！</span>
        <my-first-compoent ref="childC" @change-child-value="handlerChangeChildvalue" :title="msg"></my-first-compoent>
      </div>
      

</body> 

<script>
    /**
     * 1.子组件的定义
     * 2.父组件如何给子组件传值-子不可修改父传的值
     * 3.子组件通过 emit 方法调用父组件的事件-命名不可用驼峰
     * 4.父组件通过 refs 调用子组件方法
    */
    const App = {
            data() {
                return {
                    msg: '我是父组件的值'
                  
                }
            },
           
            methods:{   
                // handlerChangeChildvalue(){
                //     this.msg = '我被改变！'
                // }
                changeC(){
                    this.$refs['childC'].childClick()
                },
                handlerChangeChildvalue(value){
                    this.msg = value
                }
            },
            beforeCreate() {
               
            },
            created() {
             
            },
            }
            const app =  Vue.createApp(App) 
           
            app.component('my-first-compoent',{
                template: `
                <h1 @click="childClick">{{title}}</h1>
                
                `,
                props: ['title'],
                data(){
                    return{
                        msg:'我是子组件'
                    }
                },
                methods:{
                    childClick(){
                        //alert('子组件警告！')

                        //方法名不能用驼峰
                        // this.$emit('change-child-value')
                        this.$emit('change-child-value',"你变成了8")
                        
                    }
                }
            })
            app.mount('#app')
</script>
</html>